<!-- Page headers -->
<div class="ExampleHeader"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></div>
<div class="ExampleName">TreeGrid in Angular and NodeJS server</div>
<div class="ExampleShort">Creates TreeGrid dynamically by TreeGrid() function</div>
<div class="ExampleShort">Creates grid from and saves changes back to database on NodeJS server and SQLite3 database or static file</div>

<!-- Links to examples -->
<div class="ExampleNav ExampleDesc">
   <span class="Title">Examples:</span>
   <span class="Link Active" (click)="Reload('Static',$event)">Static file</span> (no upload) <!-- Static file without upload link -->
   <span class="Link" (click)="Reload('Table',$event)">Plain table</span> (SQL)  <!-- Plain table link -->
   <span class="Link" (click)="Reload('Tree',$event)">Tree table</span> (SQL) <!-- Tree table link -->
   <span class="Link" (click)="Reload('GanttBasic',$event)">Plain Gantt</span> (SQL) <!-- Plain Gantt link -->
   <span class="Link" (click)="Reload('GanttTree',$event)">Gantt tree</span> (SQL) <!-- Gantt tree link -->
   <span class="Link" (click)="Reload('Run',$event)">Run chart</span> (SQL) <!-- Run chart link -->
   <span class="Link" (click)="Reload('Sheet',$event)">Sheet</span> (file upload) <!-- Sheet link -->
</div>

<!-- Example descriptions -->
<div class="ExampleDesc">
   <i>Source files:</i> <a id='LayoutLink' href="Layouts/StaticDef.js" target="_blank"><h4 id="LayoutName">StaticDef.js</h4></a> (static JSON layout), 
   <a id='DataLink' href="Layouts/StaticData.js" target="_blank"> <h4 id="DataName">Layouts/StaticData.js</h4></a><span id="DataDesc"> (static JSON data)</span>
</div>
<div class="ExampleDesc">
   The <b>Static</b> file example loads data directly without server and cannot upload changes. 
   The <b>SQL</b> examples use <h4>SQLite3</h4> <b>SQLite.db</b> file as source SQL database.
   The <b>Sheet</b> example loads and saves the whole data on server as file.
</div>

<div class="ExampleBorder">

   <!-- TreeGrid main tag, it will contain the grid. The id is used for creating grid by TreeGrid() function -->
   <div class="ExampleMain" style="width:100%;height:530px;" id="TreeGridMainTag"></div>
</div>
